<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/assets/logo.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>About Bun + React + TS</title>
  </head>
  <body>
    <div id="root">
      <div style="max-width: 800px; margin: 0 auto; padding: 2rem; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6;">
        <h1>About Bun + React + TS</h1>
        
        <section style="margin-bottom: 2rem;">
          <h2 style="color: #333; margin-top: 2rem;">Development</h2>
          <p>
            In development, static content including all HTML, scripts, JSX, CSS, images and other imports 
            are served by Bun with Hot Module Reloading so changes are loaded in the browser immediately.
          </p>
        </section>
        
        <section>
          <h2 style="color: #333; margin-top: 2rem;">Production</h2>
          <p>
            For production, during deployment the static content assets are bundled into the 
            <code style="background: #f5f5f5; padding: 0.2rem 0.4rem; border-radius: 3px;">dist/client</code> 
            directory and uploaded as static assets to Cloudflare which are served <strong>before</strong> 
            the worker on paths that have matching assets.
          </p>
        </section>
      </div>
    </div>
  </body>
</html>
